<!DOCTYPE html>
<html>

<head>
    <title>ajax与json应用</title>
    <meta charset="utf-8" />
</head>

<body>
    <div>
        <h3>请输入您要参考的姓氏</h3>
        <form action="">
            姓氏：<input id="name1" value="" />
        </form>
        <p>参考：<span id="referrer"></span></p>
    </div>
</body>
<script>

    function loadText(str) {
            if (str.length == 0) {
                document.getElementById("referrer").innerHTML = "";
                return;//注意添加
            }
            var xhr;
            if (window.XMLHttpRequest) {
                xhr = new XMLHttpRequest();
            } else {
                xhr = new ActiveXObject('Microsoft.XMLHTTP');
            }
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    document.getElementById("referrer").innerHTML = xhr.responseText;
                }
            }
            /*xhr.open('post','/json/text.txt',true);
            xhr.setRequestHeader('dataType','text');*/
            xhr.open('get', '/phpModules/nameQuery/nameQuery.php?q=' + str, true);
            //            xhr.setRequestHeader('dataType', 'json');
            xhr.send();
    }
    document.getElementById("name1").addEventListener('keyup', function() {
        var value1 = document.getElementById('name1').value; 
        loadText(value1);
    });

</script>

</html>
